<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react的核心库-->
    <script src="build/react.js" charset="utf-8"></script>
    <!--提供与dom相关的功能-->
    <script src="build/react-dom.js" charset="UTF-8"></script>
    <!--将jsx语法转换成javascript语法-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" charset="UTF-8"></script>
</head>
<body>
<!--react渲染的模板内容会插入到dom节点中，作为一个容器-->
<div id="container"></div>
</body>
<!--在react开发中使用jsx，与javascript不兼容，在使用jsx的地方，要设置type="text/label"-->
<!--label是一个转换编辑器，ES6转成可以在浏览器中运行的代码-->
<script type="text/babel">
    //在此处编写react内容
    //生命周期介绍：组件的生命周期可分为三个状态：
//    Mounting:组件挂载，已插入真是DOM，Updating:组件更新，正在被重新渲染，Unmounting:组件移出，已移出真是DOM
//    2.组件的生命周期可分为四个阶段：创建、实例化、更新、销毁
//    3、网易新闻列表页面

    //生命周期各阶段介绍
    var Demo=React.createClass({
//        一、创建阶段   流程：只调用gerDefaultProps方法
        getDefaultProps:function () {
//            在创建类的时候被调用，设置this.props的默认值
            console.log("getDefaultProps");
            return {};
        },
        /*
         二、实例化阶段
         流程
         getInitialState
         componentWillMount
         render
         componentDidMount
        */

        getInitialState:function () {
            console.log("getInitialState");
            return null;
        },
        componentWillMount:function () {
            console.log("componentWillMount");
        },
        render:function () {
            console.log("render");
            return <div>hello React</div>
        },
        componentDidMount:function () {
//            在render之后调用
//            在该方法中，React会使用render方法返回的虚拟DOM对象创建真实的DOM结构，可以在这个方法中读取DOM节点
            console.log("componentDidMount");
        },
//        三：更新阶段
/*
流程：
componentWillReceiveProps
shouldComponentUpdate  如果返回值是false，后三个方法不执行
componentWillUpdate
render
componentDidUpdate
 */
        componentWillReceiveProps:function () {
            console.log("componentWillReceiveProps");
        },
        shouldComponentUpdate:function () {
            console.log("shouldComponentUpdate");
            return false;
        },
        componentWillUpdate:function () {
            console.log("componentWillUpdate");
        },
        componentDidUpdate:function () {
            console.log("componentDidUpdate");
        },
        /*
        四、销毁阶段
        流程：
        componentWillUnmount

         */
        componentWillUnmount:function () {
            console.log("componentWillUnmount");
        }
    });
    ReactDOM.render(
        <Demo/>,
        document.getElementById("container")
    );
    ReactDOM.render(
        <Demo/>,
        document.getElementById("container")
    );
    //移除组件
    ReactDOM.unmountComponentAtNode(document.getElementById("container"));
</script>
</html>